// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.flag-country {
  --height: 1em;
  // Original flag svg ratio; using a different ratio turns the flag into a blurry mess on Chrome.
  --width-height-ratio: calc(100 / 72);

  height: var(--height);
  width: calc(var(--height) * var(--width-height-ratio));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 3px;
  position: relative;
  filter: saturate(1.1);
  display: block;

  .own-layer(); // Force gpu filter: on Safari.

  &::after {
    .full-size();
    background: inherit;
    border-radius: inherit;
    filter: contrast(0) brightness(2);
    opacity: 0.25;
    content: "";
  }

  &--flat {
    box-shadow: none;
  }

  &--medium {
    --height: @flag-size-medium;
  }

  &--small {
    --height: 13px;
  }

  &--wiki {
    display: inline-block;
    border-radius: unset; // border-radius makes it blurry at smaller sizes
    bottom: -0.1em; // more aligned with inlined text (probably)
  }
}
